<template>
	<view>
		<view class="navi-bar">
			<view class="navi-back" @click="goBack">
				<
			</view>
			<view class="navi-title">
				{{this.tag[this.index]}}
			</view>
		</view>
		<u-gap height="100" bgColor="#fff"></u-gap>
		<keep-alive>
			<component :is="tabs[this.index].component"></component>
		</keep-alive>
	</view>
</template>

<script>
	import DailySign from '../../components/FindComponents/DailySign.vue'
	import ReadView from '../../components/FindComponents/ReadView.vue'
	import Questions from '../../components/FindComponents/Questions.vue'
	import LongView from '../../components/LongView.vue'
	import BookShadow from '../../components/FindComponents/BookShadow.vue'
	import MusicView from '../../components/FindComponents/MusicView.vue'
	import RadioView from '../../components/RadioView.vue'
	
	export default {
		data() {
			return {
				index: 0,
				tag: [
					'日签',
					'问答',
					'阅读',
					'长篇',
					'书影',
					'音乐',
					'收音机'
				],
				tabs: [{
						component: DailySign.name
					},
					{
						component: Questions.name
					},
					{
						component: ReadView.name,
					},
					{
						component: LongView.name
					},
					{
						component: BookShadow.name
					},
					{
						component: MusicView.name
					},
					{
						component: RadioView.name
					}
				]
			}
		},
		components: {
			ReadView,
			DailySign,
			Questions,
			LongView,
			BookShadow,
			MusicView,
			RadioView
		},
		onLoad({
			index
		}) {
			// console.log(index);
			this.index = index
		},
		methods: {
			goBack() {
				// 返回上一级并刷新当前页面
				this.$router.go(-1)
			}
		}
	}
</script>

<style lang="scss">
	.navi-bar {
		position: fixed;
		width: 750rpx;
		height: 100rpx;
		line-height: 100rpx;
		z-index: 1000;
		background-color: #fff;
		
		.navi-back {
			margin-left: 15px;
			float: left;
		}
		
		.navi-title {
			margin-right: 28px;
			text-align: center;
		}
	}
</style>
